<template>
	
<scroll-view  scroll-y="true"  :style="{'height': wh +'px'}">		
	
	<!-- 未登录 -->
	<view class="login-page" v-if="token === '' ">
					<view class="noLogin">
								<uni-icons class="icon" type="contact-filled" size="120" color="#afafaf"></uni-icons>				
								<view class="oneLogin">
												<button  type="default" @click="login">一键登录</button>
								</view>
								<view class="info">
												登录后尽享更多权益
								</view>
					</view>
	</view>
	
	<!-- 已登录 -->
	<UserInfo v-else></UserInfo>
	
	
</scroll-view>
	
</template>

<script>
	import badgeMix from '@/mixins/tabber-badge.js'
	import { mapState,mapMutations } from 'vuex'
	import UserInfo from '@/components/userinfo/userinfo.vue'
	
	export default {
		components:{ UserInfo },
		mixins:[badgeMix],
		data() {
			return {}
		},
		computed:{ ...mapState('user',['user','token','redirectInfo']) },
		onLoad(){
					
					//计算可用屏幕高度
					const res = uni.getSystemInfo({
							success:(res=>{
									this.wh = res.windowHeight - 54
							})
					})	
		},
		methods:{
					...mapMutations('user',['setUser','setToken','setRedirectInfo']),
					async login(){
								uni.getUserProfile({ //用户授权
											desc:'获取用户信息',
											success: async res1=>{
														console.log('res1',res1)
														this.setUser(res1.userInfo)
														//调用微信登录接口获取用户信息
														uni.login({
																	provider: 'weixin',
																	success: async res2=>{
																				console.log('res2',res2)
																				if (res2.errMsg === 'login:ok') {
																								//准备参数对象
																								const query = { 
																											code: res2.code, 
																											encryptedData: res1.encryptedData, 
																											iv: res1.iv, 
																											rawData: res1.rawData, 
																											signature: res1.signature ,
																								}
																								console.log('query',query)
																								//请求后台数据 获取token
																								const { data:loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin',query)
																								if(loginResult.meta.status != 400) return uni.$showMsg('登录失败！')
																								const token = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo'
																								this.setToken(token)
																								uni.$showMsg('登录成功')
																								// const pages = getCurrentPages() // 获取栈实例
																								// const currentRoute = pages[pages.length - 1].route;
																								// console.log('currentRoute',currentRoute)
																								if(this.redirectInfo !== ''){
																												uni.switchTab({
																														url:this.redirectInfo,
																														
																												})
																								}
																				}
																				
																	}
														})
														
											},
											fail:()=> {
														uni.showToast({
																	title: '您已取消授权',
																	icon: 'error',
																	mask: true,
														})
											}
								})
				 }
		},
	}
</script>

<style lang="scss">
	.login-page{
						padding-top: 20%;
						background-color: #f7f8f6;
						padding-bottom: 140rpx;
						// 绘制登录盒子底部的半椭圆造型 
				.noLogin{
							.icon{
									display: flex;
									justify-content: center;
									margin: 10rpx;
						}
						.oneLogin{
									button{
											background-color: #c70000;
											color: white;
											border-radius: 50rpx;
											font-weight: 200;
											width: 700rpx;
											margin-bottom: 40rpx;
									}
						}
						.info{
									color: #afafaf;
									font-size: 24rpx;
									text-align: center;
						}
						&::after {
										content: ' '; 
										display: block; 
										position: absolute; 
										width: 100%; 
										height: 30px; 
										left: 0; 
										bottom: 0; 
										background-color: white; 
										border-radius: 100%; 
										transform: translateY(50%); 
						}
				}
				

				
	}

</style>
